<template>
	<view v-if="myInfo==''">
		<xbd-zwnz marginTop='200'></xbd-zwnz>
	</view>
	<view v-else class="detail-page">
		<view class="title">
			<view class="left">

			</view>
			<view class="">
				{{myInfo.title}}
			</view>
		</view>

		<view class="center">
			<!-- 项目概况 -->
			<xbd-page-card>
				<template>
					<xbd-image-title title="项目概况">
						<template>
							<view style="color:#2E73FC; font-size: 26rpx;">上报进度{{Math.ceil(myInfo.progress*100)}}% </view>
						</template>
					</xbd-image-title>
					<!-- <image class="avatar" src="@/static/image/avatar.png"></image> -->
					<view class="tag">
						<view class="left">经办人</view>
						<view class="right">{{myInfo.handle_name}}</view>
					</view>
					<view class="tag">
						<view class="left">建设单位</view>
						<view class="right">{{myInfo.department}}</view>
					</view>
					<view class="tag">
						<view class="left">项目类型</view>
						<view class="right">{{ grade(myInfo.type) }} <text v-if="myInfo.type!=='goods'">-{{ myInfo.module }}</text> </view>
					</view>
					<view class="tag">
						<view class="left">创建人</view>
						<view class="right">{{myInfo.creator_id.admin_name}}</view>
					</view>
					<view class="tag">
						<view class="left">开始时间</view>
						<view class="right">{{myInfo.created_at | timeFormat('YYYY-MM-DD HH:mm')}}</view>
					</view>
				</template>
			</xbd-page-card>

			<!-- 项目流程 -->
			<xbd-page-card>
				<template>
					<view class="">
						<xbd-image-title title="项目流程">
							<template>
								<view class="card-right">
									<view class="image">
										<image src="@/static/image/garden4.png"></image>
										待审查
									</view>
									<view class="image">
										<image src="@/static/image/garden3.png"></image>
										已审查
									</view>
									<view class="image">
										<image src="@/static/image/garden2.png"></image>
										未上报
									</view>
								</view>

							</template>
						</xbd-image-title>
							<view v-for="(item,index) in myInfo.process" :key='index'>
								<xbd-project-card v-if="hackReset"  :myinfo="item" :farId="id"
									:type="myInfo.type" :inx="index" :open=" inx== index ? open : change2" :names="myInfo.handle_name" :length="myInfo.process.length"></xbd-project-card>
							</view>
							
					</view>
				</template>
			</xbd-page-card>
		</view>

	</view>
</template>

<script>
	import {
		Prevention
	} from '@/api/index.js';
	export default {
		components: {},
		data() {
			return {
				id: '',
				open:true,
				change2:false,
				hackReset:true,
				myInfo: '',
				inx:''
			};
		},
		methods: {
			grade(val) {
				let res = "";
				switch (val) {
					case "policy":
						res = "三重一大";
						break;
					case "bid":
						res = "招投标";
						break;
					case "goods":
						res = "物资采购";
						break;
				}
				return res;
			},
			async init() {
				console.log(this.id,'this.id')
				const res = await Prevention.getDetail(this.id)
				if(res.success){
					this.myInfo = res.data
					this.myInfo.process.forEach((item,index)=>{
						if(item.last_state=='refused' && item.flow[item.flow.length-1].state==''){
						this.myInfo.process[index].flow.pop()
						}
					})
				}else{
					this.$showToast(res.msg);
				}
				
				console.log(res)
			},
			eventUpdata(inx,val){
				this.inx = inx
				this.open = true
				console.log(inx,val,'sadasdasd')
				this.myInfo.process[inx].flow[val].state='wait'
				console.log(this.myInfo.process,'this.myInfo.process')
				this.myInfo.process.forEach((item,index)=>{
					if(item.last_state=='refused' && item.flow[item.flow.length-1].state==''){
					this.myInfo.process[index].flow.pop()
					}
				})
				this.hackReset = false
				this.$nextTick(()=>{
				  this.hackReset = true
				})
			}
		},
		async onLoad(res) {
			
			this.id = res.id
			 await this.init()
			uni.$on('flowUpdata', this.eventUpdata)
			uni.$on('upLoad', this.init)
		},
		onUnload() {
			uni.$off('upLoad');
			uni.$off('flowUpdata')
		},
	}
</script>

<style lang="scss">
	.detail-page {
		.center {
			padding: 32rpx;
			position: relative;

			.avatar {
				position: absolute;
				top: 120rpx;
				right: 66rpx;
				width: 160rpx;
				height: 160rpx;
			}

			.tag {
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				.right {
					font-weight: 400;
					font-size: 30rpx;
					color: #000623;
				}

				.left {
					width: 120rpx;
					font-size: 28rpx;
					color: #A0A7B8;
					margin-right: 40rpx;
				}

				&:nth-last-child(1) {
					margin-bottom: 30rpx;
				}
			}
		}

		.title {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 800;

			.left {
				width: 10rpx;
				height: 28rpx;
				background-color: #2E73FC;
				border-top-right-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				margin-right: 24rpx;
			}
		}

		.card-right {
			display: flex;
		}

		.image {
			font-size: 26rpx;
			color: #8890A5;
			margin-right: 20rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}

		}
	}
</style>
